<template>
  <span>
    <a style="margin-left:10px;" @click="show">选择</a>
    <a-modal title="选择图标" :visible="visible" @ok="handleOk" @cancel="handleCancel">
      <div class="iconp">
        <a
          :style="{
            backgroundColor: active == k ? '#1890ff' : '#001529'
          }"
          @click="choose(k)"
          class="svgIcon"
          v-for="k in keys"
          :key="k"
        >
          <a-icon :component="icons[k]" style="font-size:20px;" />
        </a>
      </div>
    </a-modal>
  </span>
</template>
<script>
import icons from '@/utils/menuIcons'
export default {
  data () {
    return {
      active: '',
      visible: false,
      icons,
      keys: []
    }
  },
  created () {
    for (const key in icons) {
      this.keys.push(key)
    }
  },
  mounted () {},
  methods: {
    show () {
      this.active = ''
      this.visible = true
    },
    handleCancel () {
      this.visible = false
    },
    handleOk () {
      if (this.active !== '') {
        this.$emit('change', this.active)
        this.visible = false
      }
    },
    choose (item) {
      this.active = item
    }
  }
}
</script>
<style scoped>
.svgIcon {
  display: block;
  background-color: #001529;
  margin: 9px;
  padding: 10px;
}
.iconp {
  display: flex;
  align-items: center;
  display: -webkit-flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
